<template>
  <el-dialog v-model="visible" width="50%" :title="dialogTitle">
    <el-form :model="scenicDetail" label-width="120px" v-if="scenicDetail">
      <el-form-item label="景点名称">
        <el-input v-model="scenicDetail.scenicName" disabled />
      </el-form-item>
      <el-form-item label="景点照片" v-if="scenicDetail.scenicPic">
          <img :src="scenicDetail.scenicPic" alt="景点照片" style="max-width: 100%; max-height: 300px; object-fit: contain;" />
      </el-form-item>
      <el-form-item label="景点视频" v-if="scenicDetail.scenicVideo">
          <video controls :src="scenicDetail.scenicVideo" style="width: 100%; max-height: 300px;"></video>
      </el-form-item>
      <el-form-item label="景点地址">
        <el-input v-model="scenicDetail.scenicAddress" disabled />
      </el-form-item>
      <el-form-item label="景点类型">
        <el-input v-model="scenicDetail.scenicType" disabled />
      </el-form-item>
      <el-form-item label="票价">
        <el-input v-model="scenicDetail.ticketPrice" disabled />
      </el-form-item>
      <el-form-item label="开放时间">
        <el-input v-model="scenicDetail.openTime" disabled />
      </el-form-item>
      <el-form-item label="关闭时间">
        <el-input v-model="scenicDetail.closeTime" disabled />
      </el-form-item>
      <el-form-item label="景点描述">
        <el-input type="textarea" v-model="dialogContent" disabled />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElDialog, ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'

const visible = ref(false)  // 控制弹框显示与否
const dialogTitle = ref('景点详情')  // 弹框标题
const dialogType = ref('text')  // 弹框内容类型 (image/video/text)
const dialogContent = ref('')  // 弹框内容
const scenicDetail = ref(null)  // 景点详情

/**
 * 显示弹框并设置内容
 * @param {object} details 景点详细信息
 */
const showDialog = (details) => {
    // 去除富文本中的 HTML 标签，只保留文本内容
    scenicDetail.value = details
    console.log('景点详情是',details.scenicText)
    dialogContent.value = details.scenicText.replace(/<[^>]+>/g, '')  // 使用正则去掉所有 HTML 标签
    visible.value = true
}


defineExpose({
  showDialog
})
</script>

<style scoped>
/* 弹框组件的样式 */
</style>
